<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<th:block th:include="include :: bootstrap-switch-css" />
<body class="gray-bg">
    <div class="container-div">
		<form class="form-horizontal m" id="form-upkeepTemplate-add">
		<div class="tabs-container">
			<div class="panel-body">
				<h4 class="title-ele overhaul-tit">基本信息</h4>
				<div class="row overhaul">
					<input id="templateId" name="templateId" type="hidden"/>
					<div class="row  m-l-r">
						<div style="margin:20px 15px;">
							<div class="form-group">
								<label class="col-sm-2 control-label">模板名称：</label>
								<div class="col-sm-5">
									<input id="templateName" name="templateName" class="form-control" type="text" required>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">电梯类型：</label>
								<div class="col-sm-5">
									<select id="elevatorType" name="elevatorType" class="form-control m-b">
										<option value="1">直梯</option>
										<option value="2">扶梯</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">保养类型：</label>
								<div class="col-sm-5">
									<select id="upkeepType" class="form-control m-b" th:with="type=${@dict.getType('business_upkeep_type')}">
										<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">备注：</label>
								<div class="col-sm-5">
									<input id="remark" name="remark" class="form-control" type="text">
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--直梯项目保养清单-->
				<div id="straight_ladder">
					<div class="panel-heading">
						<ul class="nav nav-tabs nav1">
							<li class="active"><a href="#tab-1-1" onclick="" data-toggle="tab">机房</a></li>
							<li><a href="#tab-1-2" onclick="" data-toggle="tab">层站</a></li>
							<li><a href="#tab-1-3" onclick="" data-toggle="tab">轿厢</a></li>
							<li><a href="#tab-1-4" onclick="" data-toggle="tab">井道</a></li>
						</ul>
					</div>
					<div class="panel-body">
						<div class="tab-content">
							<div class="tab-pane active" id="tab-1-1">
								<div class="table-responsive">
									<table class="table table-bordered table-hover no-border main-icon">
										<thead>
										<tr>
											<th>保养项名称</th>
											<th>保养项要求</th>
											<th></th>
										</tr>
										</thead>
										<tbody id="tbody-1-1">
										<tr>
											<td><input name="projectName_1" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input name="projectRequire_1" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="tab-pane" id="tab-1-2">
								<div class="table-responsive">
									<table class="table table-bordered table-hover no-border main-icon">
										<thead>
										<tr>
											<th>保养项名称</th>
											<th>保养项要求</th>
											<th></th>
										</tr>
										</thead>
										<tbody id="tbody-1-2">
										<tr>
											<td><input name="projectName_2" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input name="projectRequire_2" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="tab-pane" id="tab-1-3">
								<div class="table-responsive">
									<table class="table table-bordered table-hover no-border main-icon">
										<thead>
										<tr>
											<th>保养项名称</th>
											<th>保养项要求</th>
											<th></th>
										</tr>
										</thead>
										<tbody id="tbody-1-3">
										<tr>
											<td><input name="projectName_3" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input name="projectRequire_3" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="tab-pane" id="tab-1-4">
								<div class="table-responsive">
									<table class="table table-bordered table-hover no-border main-icon">
										<thead>
										<tr>
											<th>保养项名称</th>
											<th>保养项要求</th>
											<th></th>
										</tr>
										</thead>
										<tbody id="tbody-1-4">
										<tr>
											<td><input name="projectName_4" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input name="projectRequire_4" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 扶梯项目保养清单 -->
				<div id="escalator" style="display: none">
					<div class="table-responsive">
						<table class="table table-bordered table-hover no-border main-icon">
							<thead>
							<tr>
								<th>保养项名称</th>
								<th>保养项要求</th>
								<th></th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td><input name="projectName_0" class="form-control" placeholder="请输入保养项名称"></td>
								<td><input name="projectRequire_0" class="form-control" placeholder="请输入保养项要求"></td>
								<td>
									<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
									<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
	<th:block th:include="include :: bootstrap-switch-js" />
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
    <script type="text/javascript">
		var prefix = ctx + "business/upkeepTemplate"
		$("#form-upkeepTemplate-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

        $("#elevatorType").bind("change", function() {
            if(this.value == '1'){
                $("#escalator").attr("disabled", "disabled");
                $("#escalator").hide();
                $("#straight_ladder").removeAttr("disabled");
                $("#straight_ladder").show();
            }else if(this.value == '2'){
                $("#straight_ladder").attr("disabled", "disabled");
                $("#straight_ladder").hide();
                $("#escalator").removeAttr("disabled");
                $("#escalator").show();
            }
        });
		
		function submitHandler() {
		    var templateId = $("#templateId").val();
            var url = prefix + "/add";
            if(templateId != ""){
                url = prefix + "/edit";
            }

            var templateName = $("input[name='templateName']").val();
            var elevatorType = $("#elevatorType option:selected").val();
            var upkeepType = $("#upkeepType option:selected").val();
            var remark = $("input[name='remark']").val();

            var projectName_0 = $("input[name='projectName_0']").map(function () { return this.value; }).get().join(",");
            var projectRequire_0 = $("input[name='projectRequire_0']").map(function () { return this.value; }).get().join(",");
            var projectName_1 = $("input[name='projectName_1']").map(function () { return this.value; }).get().join(",");
            var projectRequire_1 = $("input[name='projectRequire_1']").map(function () { return this.value; }).get().join(",");
            var projectName_2 = $("input[name='projectName_2']").map(function () { return this.value; }).get().join(",");
            var projectRequire_2 = $("input[name='projectRequire_2']").map(function () { return this.value; }).get().join(",");
            var projectName_3 = $("input[name='projectName_3']").map(function () { return this.value; }).get().join(",");
            var projectRequire_3 = $("input[name='projectRequire_3']").map(function () { return this.value; }).get().join(",");
            var projectName_4 = $("input[name='projectName_4']").map(function () { return this.value; }).get().join(",");
            var projectRequire_4 = $("input[name='projectRequire_4']").map(function () { return this.value; }).get().join(",");

            $.ajax({
                cache : true,
                type : "POST",
                url : url,
                data : {
                    "templateId" : templateId,
                    "templateName": templateName,
                    "elevatorType": elevatorType,
                    "upkeepType": upkeepType,
                    "remark": remark,

                    "projectName_0": projectName_0,
					"projectName_1": projectName_1,
					"projectName_2": projectName_2,
					"projectName_3": projectName_3,
					"projectName_4": projectName_4,
                    "projectRequire_0": projectRequire_0,
					"projectRequire_1": projectRequire_1,
					"projectRequire_2": projectRequire_2,
					"projectRequire_3": projectRequire_3,
					"projectRequire_4": projectRequire_4
                },
                async : false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(s) {
                    $.operate.successCallback(s);
                }
            });
	    }


	    function addItem(obj){
            if ($.validate.form()) {
                var templateName = $("input[name='templateName']").val();
                var elevatorType = $("#elevatorType option:selected").val();
                var upkeepType = $("#upkeepType option:selected").val();
                var remark = $("input[name='remark']").val();

                var templateId = $("#templateId").val();
                var url = prefix + "/add";
				if(templateId != ""){
                    //初始化“+”的点击事件
                    var add_html = $(obj).parent().parent().clone();
                    $(add_html).find("input").val("");
                    $(obj).parent().parent().after(add_html);
                    return false;
				}
                $.ajax({
                    cache : true,
                    type : "POST",
                    url : url,
                    data : {
                        "templateId" : templateId,
                        "templateName": templateName,
                        "elevatorType": elevatorType,
                        "upkeepType": upkeepType,
                        "remark": remark
                    },
                    async : false,
                    error : function(request) {
                        $.modal.alertError("系统错误");
                    },
                    success : function(s) {
                        $("#templateId").val(s.data.templateId);
                        //初始化“+”的点击事件
                        var add_html = $(obj).parent().parent().clone();
                        $(add_html).find("input").val("");
                        $(obj).parent().parent().after(add_html);
                    }
                });
            }
		}

		function deleteItem(obj){
            //初始化“-”的点击事件
            $(obj).parent().parent().remove();
		}


	</script>
</body>
</html>
